<!DOCTYPE html>
<html>
<head>
<script>
window.enablePixelTesting = true;
</script>
<script src="../../../resources/js-test.js"></script>
<script src="../resources/picker-common.js"></script>
</head>
<body>
<style>
select {
    padding-left: 20px;
    background-color: #DDDDFF;
}

option.styled {
    font-style: italic;
    font-variant: small-caps;
    font-weight: bold;
    font-family: cursive;
    font-size: 24px;
    background-color: green;
    color: red;
}
</style>
<select id="menu">
  <option>foo</option>
  <optgroup label="group" id="group">
      <option selected>bar</option>
  </optgroup>
  <option hidden>qux</option>
  <option class="styled">baz</option>
</select>
<p id="description" style="opacity: 0"></p>
<div id="console" style="opacity: 0"></div>
<script>
var menu = document.getElementById('menu');
menu.appendChild(new Option('before separator'));
menu.appendChild(document.createElement('hr'));
menu.appendChild(new Option('after separator'));
var group = document.getElementById('group');
group.appendChild(document.createElement('hr'));
var nestedGroup = document.createElement('optgroup');
nestedGroup.label = 'Nested group';
nestedGroup.innerHTML = '<option>Should not be shown</option>';
group.appendChild(nestedGroup);
openPicker(menu, finishJSTest, function () {
    testFailed('picker didn\'t open')
    finishJSTest();
});
</script>
</body>
</html>
